<template>
  <div>
    <el-divider>客户信息</el-divider>
    <el-form-item style="margin-left: 0">
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="委托方全称" prop="clientFullName">
            <el-input v-model="reportCommonObj.clientFullName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方联系人姓名" label-width="150px" prop="clientUserName">
            <el-input v-model="reportCommonObj.clientUserName" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方联系人职务" label-width="130px">
            <el-input v-model="reportCommonObj.clientUserJob" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="委托方联系人电话" label-width="150px" prop="clientUserPhone">
            <el-input v-model="reportCommonObj.clientUserPhone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="业务来源" prop="bankId">
            <el-select v-model="reportCommonObj.bankId" clearable filterable @change="selectClient" @clear="resetClient">
              <el-option v-for="item in clientList" :key="item.id" :label="item.businessName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户全称" prop="channelId">
            <el-select v-model="reportCommonObj.channelId" clearable filterable @change="selectChannel" @clear="resetChannel">
              <el-option v-for="item in channelList" :key="item.id" :label="item.channelName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="子级名称" prop="channelSubBranchId">
            <el-select v-model="reportCommonObj.channelSubBranchId" clearable filterable @change="selectBranch" @clear="resetBranch">
              <el-option v-for="item in branchList" :key="item.id" :label="item.branchName" :value="Number(item.id)" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20" align="middle">
        <el-col :span="6">
          <el-form-item label="客户联系人姓名" label-width="130px" prop="customerUserName">
            <!--            <el-input v-model="reportCommonObj.customerUserName" />-->
            <el-select
              v-model="reportCommonObj.customerUserName"
              placeholder="请选择检索内容"
              filterable
              clearable
              allow-create
              @change="selectRelation"
            >
              <el-option
                v-for="item in relationList"
                :key="item.relation"
                :label="item.relation"
                :value="item.relation"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户联系人职务" label-width="130px">
            <el-input v-model="reportCommonObj.customerUserJob" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户联系人电话" label-width="130px" prop="customerUserPhone">
            <!--            <el-input v-model="reportCommonObj.customerUserPhone" />-->
            <el-select
              v-model="reportCommonObj.customerUserPhone"
              placeholder="请选择检索内容"
              filterable
              clearable
              allow-create
            >
              <el-option
                v-for="item in relationList"
                :key="item.phone"
                :label="item.phone"
                :value="item.phone"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
  </div>
</template>

<script>
import { clientBranchNoPage, clientBusinessNoPage, clientChannelNoPage, clientRelationNoPage } from '@/api/client'

export default {
  name: 'ClientInfo',
  props: {
    reportCommonObj: {
      channelId: null,
      bankId: null,
      channelSubBranchId: null,
      type: Object,
      required: true
    },
    isAudit: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      channelList: [],
      clientList: [],
      branchList: [],
      relationList: [],
      relationListFinal: [],
      researchersCallList: [],
      channelListFinal: [],
      clientListFinal: [],
      branchListFinal: [],
      continue: []
    }
  },

  created() {
    this.init()
  },

  methods: {
    init() {
      this.getChannelList()
      this.getClientsList()
      this.getBranchList()
      this.getRelationList()
    },

    getRelationList() {
      clientRelationNoPage().then(res => {
        this.relationList = res.data.list
        this.relationListFinal = res.data.list
      })
    },

    getChannelList() {
      clientChannelNoPage().then(res => {
        this.channelList = res.data.list
        this.channelListFinal = res.data.list
      })
    },
    getClientsList() {
      clientBusinessNoPage().then(res => {
        this.clientList = res.data.list
        this.clientListFinal = res.data.list
      })
    },
    getBranchList() {
      clientBranchNoPage().then(res => {
        this.branchList = res.data.list
        this.branchListFinal = res.data.list
      })
    },
    selectClient(val) {
      // 筛选this.channelList.parentLeve等于val的内容
      this.channelList = this.channelListFinal.filter(item => item.parentLevel === val)
    },
    selectChannel(val) {
      // 筛选this.branchList.parentLeve等于val的内容
      this.branchList = this.branchListFinal.filter(item => item.parentLevel === val)
      this.continue = this.channelListFinal.filter(item => item.id === val)
      var parentLevel = this.continue[0].parentLevel
      this.clientList = this.clientListFinal.filter(item => item.id === parentLevel)
    },
    selectBranch(val) {
      // 筛选this.branchList.parentLeve等于val的内容
      this.continue = this.branchListFinal.filter(item => Number(item.id) === Number(val))
      // 获取continue中的parentLevel元素
      var parentLevel = this.continue[0].parentLevel
      this.channelList = this.channelListFinal.filter(item => item.id === parentLevel)
      this.relationList = this.relationListFinal.filter(item => Number(item.sublevelId) === Number(val))
    },
    selectRelation(val) {
      this.continue = this.relationListFinal.filter(item => item.relation === val && (Number(item.sublevelId) === Number(this.reportCommonObj.channelSubBranchId) || Number(item.clientId) === Number(this.reportCommonObj.channelId)))
      this.reportCommonObj.customerUserPhone = this.continue[0].phone
    },
    resetClient() {
      this.clientList = this.clientListFinal
    },
    resetChannel() {
      this.channelList = this.channelListFinal
    },
    resetBranch() {
      this.branchList = this.branchListFinal
    }
  }
}
</script>

<style scoped>

</style>
